package com.example.card
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.card.data.DataSource
import com.example.card.model.Topic


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContent {
            Surface(
                modifier = Modifier
                    .fillMaxSize()
                    .statusBarsPadding(),
                color = MaterialTheme.colorScheme.background
            ) {
                TopicGrid(
//                      surfae 距离屏幕边距设置
                    modifier = Modifier.padding(
                        start = 8.dp,
                        top = 8.dp,
                        end = 8.dp,
                    )
                )
            }
        }
    }
}

@Composable
fun TopicGrid(modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        modifier = modifier
    ) {
        //循环调用TopicCard
        items(DataSource.topics) { topic ->
            TopicCard(topic)
        }
    }
}

@Composable
fun TopicCard(topic: Topic, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier
            .fillMaxWidth()
            .height(68.dp), // 卡片高度直接等于图片高度（68dp），无需额外高度冗余
    ) {
        // 卡片内部：左图（贴边） + 右侧信息区（横向排列）
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(), // 占满卡片高度
            verticalAlignment = Alignment.Top, // 修正：Row用verticalAlignment控制纵向对齐
            horizontalArrangement = Arrangement.Start // 可选：Row的横向排列（默认就是Start）
        ) {
            // 左侧：68×68dp图片（完全贴合卡片上下左右边框）
            Image(
                painter = painterResource(id = topic.imageRes),
                contentDescription = stringResource(id = topic.name),
                modifier = Modifier
                    .size(width = 68.dp, height = 68.dp) // 固定宽高=卡片高度，纵向贴边
                    .fillMaxHeight(), // 强制占满卡片纵向高度（确保贴上下边框）
                contentScale = ContentScale.Crop, // 裁剪填充，避免拉伸
                alignment = Alignment.Center // 图片内容居中（可选，根据需求调整）
            )

            // 右侧：信息区域（保持16dp/8dp栅格间距）
            Column(
                modifier = Modifier
                    .fillMaxHeight()
                    .padding(
                        start = 16.dp, // 与图片间距16dp
                        top = 8.dp,    // 文字与卡片顶部间距8dp（可根据需求调整，若要文字贴顶改为0dp）
                        end = 16.dp,   // 文字与卡片右侧间距16dp
                        bottom = 8.dp  // 图标组与卡片底部间距8dp（可调整）
                    ),
                verticalArrangement = Arrangement.Top
            ) {
                // 分类名称（如Photography）
                Text(
                    text = stringResource(id = topic.name),
                    style = MaterialTheme.typography.titleMedium,
                    modifier = Modifier.padding(bottom = 8.dp) // 名称与图标组间距8dp
                )

                // 图标 + 数字组（横向排列）
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(8.dp) // 图标与数字间距8dp
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_grain),
                        contentDescription = "课程数量",
                        modifier = Modifier.size(16.dp)
                    )
                    Text(
                        text = topic.availableCourses.toString(),
                        style = MaterialTheme.typography.bodyMedium
                    )
                }
            }
        }
    }
}
@Preview(showBackground = true)
@Composable
fun TopicPreview() {
    val topic = Topic(R.string.photography, 321, R.drawable.photography)
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TopicCard(topic = topic)
    }
}


